<template>
  <div style="margin-top: 50px">
    <video
      width="320"
      height="240"
      controls
      ref="video"
      style="width: 100%; height: 300px"
      src="../assets/images/测试1.mp4"
      type="video/mp4"
      poster="../assets/images/1.png"
    ></video>
    <van-count-down
      ref="countDown"
      :auto-start="false"
      @finish="onFinish"
      :time="time"
    >
      <template #default="timeData">
        <van-button
          @click="submit"
          :disabled="isDisabled"
          style="margin-top: 20px; height: 60px"
          block
          type="primary"
        >
          <p>
            我已阅读并知晓视频内容{{
              timeData.seconds != 0 ? "(" + timeData.seconds + "s)" : ""
            }}
          </p>
          <p v-if="isDisabled" style="font-size: 10px">
            (点击播放，视频开始后开始计时)
          </p>
        </van-button>
        <!-- <span class="block">{{ timeData.seconds }}</span> -->
      </template>
    </van-count-down>
  </div>
</template>

<script setup lang="ts">
import { showNotify, showToast } from "vant";
import { onMounted } from "vue";
import { ref, getCurrentInstance } from "vue";
import { watchedvideo } from "@/api/others";
import { useRoute } from "vue-router";
const route = useRoute();
const { proxy } = getCurrentInstance() as any;
const time = ref(10 * 1000);
const isDisabled = ref(true);
const onFinish = () => {
  isDisabled.value = false;
  showNotify({ type: "success", message: "恭喜您完成访客培训" });
};
const submit = async () => {
  try {
    let res = await watchedvideo({
      id: route.query.id,
    });
    showToast(res.msg);
  } catch (error: any) {
    showToast(error.msg);
  }
};
onMounted(() => {
  let v = proxy.$refs.video;
  v.addEventListener("play", function (e: any) {
    if (e) {
      proxy.$refs.countDown.start();
    }
  });
  v.addEventListener("canplaythrough", function () {
    showToast("进入流畅播放模式");
  });

  v.addEventListener("seeking", function () {
    // showToast("请耐心观看");
    return;
  });
  v.addEventListener("ended", function () {
    // showToast("已观看完成");
  });
  v.addEventListener("error", function () {
    showToast("视频出错了");
  });
  v.addEventListener(
    "timeupdate",
    () => {
      // showToast("请耐心观看");
      return;
    },
    false
  );
  v.addEventListener("volumechange", function () {
    console.log("视频格式有问题");
  });
});
</script>

<style scoped></style>
